<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from 'vue'
import useStoreCategory from '@/store/modules/category.ts'
import { reqSpuData, deleteSpu, reqLookSku } from '@/api/product/spu/index.ts'
import { Records, spuResponseData } from '@/api/product/spu/type.ts'
import SpuFrom from '@/views/product/spu/spuFrom.vue'
import SkuFrom from '@/views/product/spu/skuFrom.vue'
import { ElMessage } from 'element-plus'
const storeCategory = useStoreCategory()
const spuData = ref<Records>([])
const pageNo = ref(1)
const pageSize = ref(5)
const total = ref()
const lookSkuDialog = ref(false)
let screen = ref(1)
let spu = ref()
let sku = ref()
let lookSkuDate = ref()
watch(
  () => storeCategory.c3Id,
  () => {
    spuData.value = []
    if (!storeCategory.c3Id) return
    getSpuData()
  },
)
const getSpuData = async (cPage: number = 1) => {
  pageNo.value = cPage
  let res: spuResponseData = await reqSpuData(
    pageNo.value,
    pageSize.value,
    storeCategory.c3Id,
  )
  if (res.code == 200) {
    spuData.value = res.data.records
    total.value = res.data.total
  }
}
const handleSizeChange = () => {
  getSpuData()
}
const addSpu = () => {
  screen.value = 2
  spu.value.addInit(storeCategory.c3Id)
}
const editSpu = (row: any) => {
  screen.value = 2
  spu.value.init(row)
}
const changeScene = (obj: any) => {
  screen.value = obj.flag
  if (obj.params == 'update') {
    getSpuData(pageNo.value)
  } else {
    getSpuData()
  }
}
const deleteSpus = async (spuId: number) => {
  let res: any = await deleteSpu(spuId)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    getSpuData(spuData.value.length > 1 ? pageNo.value : pageNo.value - 1)
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败',
    })
  }
}
const addSku = (row: any) => {
  screen.value = 3
  sku.value.initSku(row, storeCategory.c1Id, storeCategory.c1Id)
}
const lookSku = async (row: any) => {
  let res: any = await reqLookSku(row.id)
  if (res.code == 200) {
    lookSkuDate.value = res.data
    lookSkuDialog.value = true
  }
}
onBeforeUnmount(() => {
  storeCategory.$reset()
})
</script>

<template>
  <Category :screen="screen"></Category>
  <el-card style="margin-top: 10px">
    <div v-show="screen == 1">
      <el-button
        type="primary"
        icon="Plus"
        plain
        @click="addSpu"
        :disabled="!storeCategory.c3Id"
        v-has="`btn.Spu.add`"
      >
        添加SPU
      </el-button>
      <el-table :data="spuData" style="margin: 10px 0" border>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column prop="spuName" label="SPU名称"></el-table-column>
        <el-table-column prop="description" label="SPU描述"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-tooltip content="新增SKU" placement="top" effect="light">
              <el-button
                type="primary"
                icon="Plus"
                plain
                @click="addSku(scope.row)"
                v-has="`btn.Spu.addsku`"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="编辑SPU" placement="top" effect="light">
              <el-button
                type="warning"
                icon="Edit"
                plain
                @click="editSpu(scope.row)"
                v-has="`btn.Spu.update`"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="查看" placement="top" effect="light">
              <el-button
                type="success"
                icon="View"
                plain
                @click="lookSku(scope.row)"
                v-has="`btn.Spu.skus`"
              ></el-button>
            </el-tooltip>
            <el-popconfirm
              :title="`你确定删除'${scope.row.spuName}'吗？`"
              @confirm="deleteSpus(scope.row.id)"
              width="250"
            >
              <template #reference>
                <el-button
                  type="danger"
                  icon="Delete"
                  plain
                  v-has="`btn.Spu.delete`"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="storeCategory.c3Id"
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15]"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="getSpuData"
        :pager-count="7"
        :hide-on-single-page="true"
      />
    </div>
    <SpuFrom
      ref="spu"
      v-show="screen == 2"
      @changeScene="changeScene"
    ></SpuFrom>
    <SkuFrom
      ref="sku"
      v-show="screen == 3"
      @changeScene="changeScene"
    ></SkuFrom>
  </el-card>
  <el-dialog v-model="lookSkuDialog" title="SKU列表">
    <el-table border :data="lookSkuDate">
      <el-table-column label="SKU名字" prop="skuName"></el-table-column>
      <el-table-column label="SKU价格" prop="price"></el-table-column>
      <el-table-column label="SKU重量" prop="weight"></el-table-column>
      <el-table-column label="SKU图片">
        <template #="{ row }">
          <img
            :src="row.skuDefaultImg"
            alt="SKU图片"
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
